<template>
  <div>
    <Tabs
      type="card"
      @on-contextmenu="handleContextMenu"
    >
      <TabPane
        label="标签一"
        name="tab1"
        context-menu
      >
        标签一的内容
      </TabPane>
      <TabPane
        label="标签二"
        name="tab2"
      >
        标签二的内容
      </TabPane>
      <TabPane
        label="标签三"
        name="tab3"
        context-menu
      >
        标签三的内容
      </TabPane>
      <template slot="contextMenu">
        <DropdownItem @click.native="handleContextMenuEdit">
          编辑
        </DropdownItem>
        <DropdownItem
          style="color: #ed4014"
          @click.native="handleContextMenuDelete"
        >
          删除
        </DropdownItem>
      </template>
    </Tabs>
    <Divider />
    <Tabs
      type="card"
      :draggable="true"
      @on-drag-drop="handleDragDrop"
    >
      <TabPane
        v-for="(tab, index) in tabs"
        :key="index"
        :label="tab.label"
        :name="tab.name"
      >
        {{ tab.label }}
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      contextData: null,
      tabs: [
        {
          label: '标签一',
          name: 'name1'
        },
        {
          label: '标签二',
          name: 'name2'
        },
        {
          label: '标签三',
          name: 'name3'
        },
        {
          label: '标签四',
          name: 'name4'
        },
        {
          label: '标签五',
          name: 'name5'
        }
      ]
    }
  },
  methods: {
    handleContextMenu (data) {
      this.contextData = data
    },
    handleContextMenuEdit () {
      this.$Message.info('Click edit of ' + this.contextData.name)
    },
    handleContextMenuDelete () {
      this.$Message.info('Click delete of ' + this.contextData.name)
    },
    handleDragDrop (name, newName, a, b, names) {
      this.tabs.splice(b, 1, ...this.tabs.splice(a, 1, this.tabs[b]))
    }
  }
}
</script>
